<!DOCTYPE html>  
<html lang="en">  
<head>  
<meta charset="UTF-8">  
<meta name="viewport" content="width=device-width, initial-scale=1.0">  
<title>简易富文本编辑器</title>  
<style>  
    #editor {  
        width: 100%;  
        height: 200px;  
        border: 1px solid #ccc;  
        padding: 10px;  
        font-family: monospace;  
        outline: none; /* 移除浏览器默认的outline */  
    }  
</style>  
</head>  
<body>  
  
<div id="editor" contenteditable="true"></div>  
  
<script>  
function getPreviousLineIndent(editor) {  
    // 获取光标所在行的前一行文本  
    let range, selection, textNode, offset, previousLineText;  
  
    if (window.getSelection && document.createRange) {  
        range = document.createRange();  
        selection = window.getSelection();  
  
        if (selection.rangeCount > 0) {  
            range = selection.getRangeAt(0);  
            range.setStart(editor, 0);  
            range.setEnd(range.startContainer, range.startOffset);  
  
            // 遍历range中的文本节点，找到光标所在的文本节点和位置  
            let treeWalker = document.createTreeWalker(  
                editor,  
                NodeFilter.SHOW_TEXT,  
                { acceptNode: function(node) { return NodeFilter.FILTER_ACCEPT; } },  
                false  
            );  
  
            let startNode = null;  
            let offsetInNode = 0;  
            let offsetInRange = 0;  
  
            while(treeWalker.nextNode()) {  
                let node = treeWalker.currentNode;  
                if (offsetInRange + node.textContent.length >= range.startOffset) {  
                    startNode = node;  
                    offsetInNode = range.startOffset - offsetInRange;  
                    break;  
                }  
                offsetInRange += node.textContent.length;  
            }  
  
            if (startNode) {  
                // 获取光标所在行的前一行文本  
                let previousLineBreakIndex = startNode.textContent.lastIndexOf('\n', offsetInNode - 1);  
                if (previousLineBreakIndex !== -1) {  
                    previousLineText = startNode.textContent.slice(  
                        previousLineBreakIndex + 1,  
                        offsetInNode - (offsetInNode > 0 ? 1 : 0) // 排除当前行的字符（如果有）  
                    ).trim();  
                }  
            }  
  
            // 计算缩进空格数  
            let indent = 0;  
            while (previousLineText && (previousLineText.charAt(indent) === ' ' || previousLineText.charAt(indent) === '\t')) {  
                indent++;  
            }  
  
            return indent;  
        }  
    }  
  
    return 0; // 如果没有找到，则返回0  
}  
  
function autoIndent(editor) {  
    editor.addEventListener('keydown', function(e) {  
        if (e.key === 'Enter') { // 回车键  
            e.preventDefault(); // 阻止默认行为以手动处理  
  
            let indent = getPreviousLineIndent(editor);  
            let indentString = ' '.repeat(indent); // 创建相应数量的空格字符串  
  
            // 插入新行和缩进  
            document.execCommand('insertHTML', false, '\n' + indentString);  
  
            // 将光标移动到新行的末尾（包括缩进）  
            let range = document.createRange();  
            let selection = window.getSelection();  
            range.setStart(editor.lastChild, indentString.length);  
            range.collapse(true);  
            selection.removeAllRanges();  
            selection.addRange(range);  
        }  
    });  
}  
  
autoIndent(document.getElementById('editor'));  
</script>  
  
</body>  
</html>